<style lang="scss" scoped>
.book {
  dl {
    line-height: 20px;
    dt {
      margin: 10px 0;
      font-size: 18px;
    }
    dd {
      font-size: 14px;
    }
  }
}
.doctor {
  dl {
    display: flex;
    padding: 10px;

    dt {
      width: 50px;
      height: 100px;
      img {
        width: 50px;
        height: 50px;
      }
      margin: 0 10px;
    }
    dd {
      .name {
        font-size: 20px;
        font-weight: 800;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
.list {
  padding: 10px;
  div {
    margin: 5px;
  }
  dl {
    display: flex;
    padding: 10px;
    dt {
      width: 50px;
      height: 100px;
      img {
        width: 50px;
        height: 50px;
      }
      margin: 0 10px;
    }
    dd {
      .name {
        font-size: 20px;
        font-weight: 800;
      }
    }
  }
}
</style>

<template>
  <div>
    <header>
      <van-nav-bar title="搜索" left-arrow @click-left="$router.back()" />
    </header>
    <van-search
      v-model="searchValue"
      show-action
      placeholder="请输入搜索关键词"
      @search="handSearch"
    >
      <template #action>
        <div @click="handSearch">搜索</div>
      </template>
    </van-search>
    <van-tabs v-model:active="active">
      <van-tab title="综合">
        <div class="book">
          <van-cell-group inset>
            <van-cell
              title="相关科普"
              value="查看更多"
              is-link
              @click="active = 1"
            />

            <dl
              v-for="(v, i) in SearchBookData"
              :key="i"
              :v="v"
              @click="KPdetail(v)"
            >
              <dt>
                {{ v.texttitle }}
              </dt>
              <dd>
                <van-text-ellipsis :content="v.textdescword" rows="2" />
                <div class="name">
                  <van-tag type="success">{{ v.texttype }}</van-tag>
                </div>
              </dd>
            </dl>
          </van-cell-group>

          <van-cell-group inset>
            <van-cell
              title="相关医生"
              value="查看更多"
              is-link
              @click="active = 2"
            />
            <div
              v-for="(v, i) in SearchDoctorData"
              :key="i"
              :v="v"
              class="doctor"
            >
              <dl>
                <dt>
                  <img
                    :src="v.doctorimage"
                    alt=""
                    style="width: 50px; height: 50px"
                  />
                </dt>
                <dd>
                  <div class="name">
                    <div>{{ v.doctorname }}</div>
                    <span style="font-size: 15px">{{ v.doctorstate }}</span>
                    <span> <van-tag type="success">三甲</van-tag></span>
                  </div>

                  <div style="font-size: 14px">
                    <span>{{ v.doctoradministre }}</span>
                  </div>
                  <div style="padding: 5px">
                    <van-tag type="primary">图文咨询</van-tag>
                    <van-tag type="success">电话咨询</van-tag>
                  </div>
                  <van-text-ellipsis
                    :content="v.doctordescword"
                    rows="2"
                    expand-text="展开"
                    collapse-text="收起"
                  />
                  <div style="padding: 10px">
                    好评率<span style="color: red">{{ v.doctorgood }}%</span
                    >|锦旗 <span style="color: red">{{ v.doctortime }}</span
                    >|浏览人次
                    <span style="color: red">{{ v.doctoradmin }}</span>
                  </div>
                  <div style="display: flex">
                    <span style="color: red">￥</span>
                    <h2>{{ v.doctorprice }}</h2>
                    起
                    <van-button
                      type="primary"
                      @click="Doctordetail(v)"
                      style="
                        width: 80px;
                        height: 35px;
                        position: absolute;
                        right: 10px;
                      "
                      >问医生</van-button
                    >
                  </div>
                </dd>
              </dl>
            </div>
          </van-cell-group>

          <van-cell-group>
            <van-cell
              title="相关医院"
              value="查看更多"
              is-link
              @click="active = 3"
            />
            <div class="list" v-for="(v, i) in SearchSocoData" :key="i" :v="v">
              <dl>
                <dt>
                  <img :src="v.socoimage" alt="" />
                </dt>
                <dd>
                  <div class="name">{{ v.nosocomium }}</div>
                  <div>
                    <van-tag plain type="primary">{{ v.socolv }}</van-tag>
                    {{ v.socoadmin }}
                  </div>
                </dd>
              </dl>
            </div>
          </van-cell-group>
        </div>
      </van-tab>
      <van-tab title="科普">
       <KP></KP>
      </van-tab>

      <van-tab title="医生">
       <YS></YS>
        
      </van-tab>
      <van-tab title="医院">
        <YY></YY>
      </van-tab>
      <van-tab title="药品">
        <YP></YP>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import axios from 'axios'

import KP from './KP/indexView.vue'
import YY from './YY/indexView.vue'
import YP from './YP/indexView.vue'
import YS from './YS/indexView.vue'
import type { bookStata, doctorState, socoState } from '@/interface'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const active = ref(0)
// 文章
const SearchBookData = ref<bookStata[]>([])
// 医生
const SearchDoctorData = ref<doctorState[]>([])
// 医院
const SearchSocoData = ref<socoState[]>([])
const handSearch = () => {
  isSearch.value = true
}
const isSearch = ref(false)
const searchValue = ref('')
const route = useRoute()
onMounted(() => {
  route.query.searchValue
  console.log(route.query.searchValue)
  axios
    .get('/api/search', {
      params: {
        searchValue: route.query.searchValue,
      },
    })
    .then(res => {
      const { data } = res.data
      console.log(data)

      SearchBookData.value = data.book
      SearchDoctorData.value = data.doctor
      SearchSocoData.value = data.soco
    })
})

const KPdetail = (v: bookStata) => {
  router.push({
    path: `/detail2/${v.textid}`,
  })
}
const Doctordetail = (v: doctorState) => {
  router.push('/doctordetail?id=' + v.doctorid)
}





</script>
